<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>正则表达式</title>
    <script>
        // 1、创建正则表达式对象
        // [1]创建方式一：new RegExp(正则表达式字符串)
        // Reg：regular正则
        // Exp：expression表达式
        let reg1 = new RegExp("abc");
        // [2]创建方式二：/正则表达式字符串/
        let reg2 = /abc/;

        // 2、正则表达式功能测试：验证
        // 检查目标字符串是否符号正则表达式设定的规则
        // [1]声明一个目标字符串
        let str = "Good morning";

        // [2]创建正则表达式对象
        // /w/表示要求目标字符串中包含 w 这个字母
        let reg = /w/;

        // [3]执行验证
        // 符合规则返回 true
        // 不符合规则返回 false
        let checkResult = reg.test(str);
        console.log(checkResult?"符合规则，有w":"不符合规则，没w");

        // 3、正则表达式功能测试：匹配
        // [1]声明一个目标字符串
        str = "Good morning";

        // [2]创建正则表达式对象
        reg = /o/;

        // [3]执行匹配
        let matchArray = str.match(reg);

        // [4]遍历匹配到的数组
        for (let i = 0; i < matchArray.length; i++) {
            let data = matchArray[i];
            console.log(data);
        }

        // 4、正则表达式功能测试：替换
        // [1]声明一个目标字符串
        str = "Good morning";

        // [2]创建正则表达式对象
        reg = /o/;
        // reg = /o/g; // 全局匹配，把所有匹配正则表达式的都替换

        // [3]把目标字符串中 o 字母替换为 E
        let strReplaced = str.replace(reg, "E");
        console.log("原来的字符串：" + str);
        console.log("替换之后的字符串：" + strReplaced);

        // 5、正则表达式功能测试：全局匹配
        // [1]声明一个目标字符串
        str = "Good Morning,Hello Boy";

        // [2]创建正则表达式对象
        // 创建正则表达式对象时，把所有匹配的字符串都返回
        reg = /[A-Z]/g;

        // [3]执行匹配
        matchArray = str.match(reg);

        // [4]遍历匹配到的数组
        for (let i = 0; i < matchArray.length; i++) {
            let data = matchArray[i];
            console.log("[A-Z]匹配到的元素：" + data);
        }

        // 6、正则表达式功能测试：忽略大小写
        // [1]声明一个目标字符串
        str = "Hello, harry!";

        // [2]创建正则表达式对象
        reg = /h/gi;

        // [3]执行替换操作看效果
        strReplaced = str.replace(reg, "~");
        console.log("Hello, harry!替换之后：" + strReplaced)

        // 7、正则表达式本身的语法
        // [1]正则表达式中有两种字符
        // 普通字符：/o/这个正则表达式就是匹配 o 这字母本身
        // 元字符：^匹配字符串开头位置、$匹配字符串结尾位置
        str = "Good morning";
        // reg = /^G/; // 匹配
        reg = /^m/; // 不匹配
        console.log(reg.test(str)?"匹配":"不匹配");

        reg = /w$/;
        console.log(reg.test(str)?"匹配":"不匹配");

        str = "Hello";
        reg = /^Hello$/; // 匹配
        reg = /^Ho$/; // 不匹配，^$两个符号都用上，表示正则表达式和目标字符串必须整体上一致
        console.log(reg.test(str)?"匹配":"不匹配");

        // [2]字符集合
        // 使用 [] 设定一个字符集合
        // 字符集合表示，目标字符串和集合中的任何一个字符匹配即可
        str = "Good morning";

        reg = /[t,w,o]/; // 表示目标字符串中包含 t,w,o 任意一个字符

        console.log(reg.test(str)?"匹配":"不匹配");

        // 集合里要写的字符太多，可以使用 - 表示范围
        reg = /[a-z]/; // 表示目标字符串中包含 a-z 任意一个字符，也就是所有小写字母
        console.log(reg.test(str)?"匹配":"不匹配");

        // /[0-9]/ 表示目标字符串中包含 0-9 任意一个字符，也就是所有数字
        // /[A-Z]/ 表示目标字符串中包含 A-Z 任意一个字符，也就是所有大写字母

        // [3]限定某个字符连续出现的次数
        str = "Good morning";
        reg = /o{3}/;
        console.log(reg.test(str)?"匹配~":"不匹配~");

        str = "Gooooooooooooood morning";
        reg = /o{3}/; // 目标字符串中有连续的 3 个 o，那么就是匹配的
        console.log(reg.test(str)?"匹配~":"不匹配~");

        // [4]针对集合限定字符出现的次数
        str = "Good morning";
        reg = /[a-z]{5}/; // 5 个连续的小写字母
        console.log(reg.test(str)?"匹配~":"不匹配~");

        // [5]限次出现次数时，可以指定范围
        str = "Good morning";
        reg = /[a-z]{3,5}/; // 3-5 个连续的小写字母
        console.log(reg.test(str)?"匹配~":"不匹配~");

        // 8、练习：创建正则表达式对象，检查用户名是否符合规则
        // 用户名规则描述：5~10个字符，只能包含大小写字母、数字、下划线，不能以数字开头
        let username = "aaabbb08888";
        reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,9}$/;
        // 使用正则表达式检测用户名是否符合指定模式
        console.log(reg.test(username)?"匹配~":"不匹配~");

        // 9、友情提示
        // 实际开发中，通常不需要自己写正则表达式，有需要用到时，通过 AI 工具生成即可
        // 我们只需要能大致看懂，如果工具生成的不符合要求，可以自己适当调整
    </script>
</head>
<body>

</body>
</html>